<template>
  <div class="user-page art-full-height">
    <BasicCrud @reset="handleReset" />
    <GrantRole ref="grantRoleRef" />
  </div>
</template>

<script setup lang="tsx">
import { useCrud } from "@/components/crud";
import { crudSchema } from "./schemas";
import GrantRole from "./grant-role.vue";
// import DeptTree from "./dept-tree.vue";
const grantRoleRef = ref();
const deptIdList = ref([]);

const [BasicCrud, crudApi] = useCrud({
  ...crudSchema,
  // beforeFetch: (params: any) => {
  //   return { ...params};
  // },
  // hasAdd: true,
  // 左侧工具栏
  toolbarActions: [],
  // 左侧栏工具-下拉菜单
  dropDownToolbarActions: [],
  // 表格行操作
  tableActions: [],
  // 表格行操作-下拉菜单
  dropDownActions: [
    {
      label: "授权角色",
      icon: "ant-design:team-outlined",
      type: "primary",
      link: true,
      dialogRef: grantRoleRef,
      dialogParams() {
        return {
          getCrudApi: () => crudApi,
        };
      },
    },
  ],
});
const handleCheck = () => {
  crudApi.reload();
};
const handleReset = () => {
  deptIdList.value = [];
};
</script>
<style lang="scss" scoped>
.tree-container {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  // gap: 16px;
  .left-sidebar {
    flex-shrink: 0;
    width: 280px;
    height: 100%;
  }

  .right-content {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
  }

  .art-table-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

@media screen and (max-width: $device-ipad) {
  .tree-container {
    display: block;
    gap: 0;
    height: auto;

    .left-sidebar {
      width: 100%;
      height: auto;
      margin-bottom: 20px;
    }
  }
}
</style>
